import React, { useState } from 'react'
import { Container } from '../static/style/timeLine'
import { Main } from '../static/style/gallery'
import MyHead from '../components/Head'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { fetch } from '../api'
import ImagePreview from '../components/ImagePreview'
import { BackTop } from 'antd'
const info = {
  article_title: 'AlanGrady的个人相册',
  article_des: 'AlanGrady的个人博客，一个有内涵的web前端，专注vue/react/nodejs/flutter,批量压缩，打包下载，压缩质量设置',
  keywords: 'AlanGrady,web前端,nginx,linux,nodejs,vue,react,flutter,react-hooks'
}
const Gallery = (props) => {
  const [modal, setModal] = useState({})
  const [show, setShow] = useState(false)
  const { list, image } = props
  const o = {}
  list.map((i) => o[i.title] ? o[i.title].push(i) : (o[i.title] = [], o[i.title].push(i)))
  const gallery = Array.from(Object.keys(o))
  const openModal = (data) => {
    setShow(true)
    setModal(data)
  }
  const closeModal = () => {
    setShow(false)
    setModal({})
  }
  return (
    <>
      <MyHead info={info}/>
      <Header/>
      <Container image={image}>
        <div className="top">
          <p>那些年我到过的地方</p>
        </div>
        <Main>
          {
            gallery.map((k, i) => (
              <div key={i}>
                <h3>{k}</h3>
                <div className="list">
                  {
                    o[k].map((item, j) => (
                      <div className="item" key={j + i}><img src={item.url} alt="item.des" onClick={() => openModal(item)}/></div>
                    ))
                  }</div>
              </div>
            ))
          }
        </Main>
      </Container>
      {show && <ImagePreview modal={modal} closeModal={closeModal}/>}
      <Footer/>
      <BackTop/>
    </>
  )
}
Gallery.getInitialProps = async () => await fetch('gallery')
export default Gallery
